<template>
	<div style="overflow-x: hidden; position: relative; height: 108vh">
		<topNav :linkMsg="linkMsg"></topNav>
		<div
			v-if="!loginState"
			style="display: flex; justify-content: center; margin-right: 3vw"
		>
			<div style="width: 65vw; position: relative">
				<div style="position: absolute; left: 42%">
					<el-result
						icon="warning"
						title="请先登录"
						sub-title="Please log on first!"
					>
						<template #extra>
							<el-button type="primary" @click="toIndex"
								>回到主页</el-button
							>
						</template>
					</el-result>
				</div>
				<el-skeleton :rows="7" animated />
			</div>
		</div>
		<div
			style="display: flex; justify-content: center; margin-right: 3vw"
			v-else
			class="slideRightReturn"
		>
			<div style="width: 65vw">
				<el-row>
					<el-col :span="5">
						<el-menu
							default-active="0"
							@select="handleSelect"
							style="
								width: 8vw;
								user-select: none;
								margin-top: 3vh;
							"
						>
							<el-menu-item
								:index="String(index)"
								v-for="(tabItem, index) in tabMsg"
								style="
									display: flex;
									justify-content: center;
									margin-bottom: 2vh;
								"
								class="hvr-underline-from-left"
							>
								<span>{{ tabItem.tabName }}</span>
							</el-menu-item>
						</el-menu>
					</el-col>
					<el-col :span="19">
						<div v-if="tabIndex === String(0)">
							<div
								style="
									display: flex;
									justify-content: center;
									align-items: center;
								"
							>
								<div
									style="
										width: 100%;
										display: flex;
										align-items: center;
									"
								>
									<div>
										<el-avatar
											:src="userData.avatar"
											:size="80"
										></el-avatar>
									</div>
									<div
										style="
											display: flex;
											flex-direction: column;
											justify-content: flex-start;
											width: 6vw;
											margin-left: 1vw;
										"
									>
										<div style="margin-bottom: 4vh">
											<el-text
												type="info"
												size="small"
												style="
													border: 1px solid #999;
													padding: 2px;
												"
											>
												{{ userData.usertype }}
											</el-text>
										</div>
										<div style="font-weight: bold">
											<el-text type="danger" size="large"
												>{{ userData.nickname }}
											</el-text>
										</div>
									</div>
									<div
										style="
											margin-left: 5vw;
											display: flex;
											justify-content: space-between;
											align-items: center;
											width: 30vw;
										"
									>
										<div
											style="
												display: flex;
												align-items: flex-end;
											"
										>
											<el-statistic
												title="注册年份"
												:value="
													userData.registdate.year
												"
												><template #suffix>
													<div
														style="font-size: 30px"
													>
														年
													</div>
												</template>
											</el-statistic>
										</div>
										<div
											style="
												display: flex;
												align-items: flex-end;
											"
										>
											<el-statistic
												title="注册月份"
												:value="
													userData.registdate.month
												"
												><template #suffix>
													<div
														style="font-size: 30px"
													>
														月
													</div>
												</template>
											</el-statistic>
										</div>
										<div
											style="
												display: flex;
												align-items: flex-end;
											"
										>
											<el-statistic
												title="距今已经"
												:value="
													userData.registdate.daysub
												"
											>
												<template #suffix>
													<div
														style="font-size: 30px"
													>
														天
													</div>
												</template>
											</el-statistic>
										</div>
									</div>
								</div>
							</div>
							<div>
								<el-divider content-position="center"
									>我的信息</el-divider
								>
							</div>
							<div>
								<el-row style="margin-bottom: 5vh">
									<el-col :span="23" :offset="1">
										<el-text type="success" size="large"
											>您是网站的第{{
												userData.id
											}}位注册者～</el-text
										>
									</el-col>
								</el-row>
								<el-row
									style="
										display: flex;
										align-items: center;
										margin-bottom: 4vh;
									"
								>
									<el-col
										:span="3"
										:offset="1"
										style="
											display: flex;
											justify-content: flex-end;
										"
									>
										<el-text size="large">昵称：</el-text>
									</el-col>
									<el-col :span="4" :offset="1">
										<el-input
											v-model="userData.nickname"
											disabled
										/>
									</el-col>
								</el-row>
								<el-row
									style="
										display: flex;
										align-items: center;
										margin-bottom: 4vh;
									"
								>
									<el-col
										:span="3"
										:offset="1"
										style="
											display: flex;
											justify-content: flex-end;
										"
									>
										<el-text size="large">用户名：</el-text>
									</el-col>
									<el-col :span="6" :offset="1">
										<el-text type="info" size="large">{{
											userData.username
										}}</el-text>
									</el-col>
								</el-row>
								<el-row
									style="
										display: flex;
										align-items: center;
										margin-bottom: 4vh;
									"
								>
									<el-col
										:span="3"
										:offset="1"
										style="
											display: flex;
											justify-content: flex-end;
										"
									>
										<el-text size="large"
											>我的签名：</el-text
										>
									</el-col>
									<el-col :span="6" :offset="1">
										<el-input
											v-model="userData.notes"
											disabled
											:rows="2"
											type="textarea"
										/>
									</el-col>
								</el-row>
								<el-row
									style="
										display: flex;
										align-items: center;
										margin-bottom: 4vh;
									"
								>
									<el-col
										:span="3"
										:offset="1"
										style="
											display: flex;
											justify-content: flex-end;
										"
									>
										<el-text size="large">性别：</el-text>
									</el-col>
									<el-col :span="4" :offset="1">
										<el-input
											v-model="userData.gender"
											disabled
										/>
									</el-col>
								</el-row>
							</div>
						</div>
						<div
							v-else-if="tabIndex === String(2)"
							class="slideRightReturn"
						>
							<div
								style="position: relative"
								ref="imgUploadTarget"
							>
								<el-divider content-position="center"
									>修改头像</el-divider
								>
								<imgUpload
									v-if="imgUploadTargetIsVisible"
								></imgUpload>
								<el-skeleton :rows="5" animated v-else />
							</div>
						</div>
						<div
							v-else-if="tabIndex === String(3)"
							class="slideRightReturn"
						>
							<div
								style="position: relative"
								ref="updateNicknameTarget"
							>
								<el-divider content-position="center"
									>修改昵称</el-divider
								>
								<updateNickname
									v-if="updateNicknameTargetIsVisible"
									class="slideRightReturn"
								></updateNickname>
								<el-skeleton :rows="5" animated v-else />
							</div>
						</div>
						<div
							v-else-if="tabIndex === String(4)"
							class="slideRightReturn"
						>
							<div
								style="position: relative"
								ref="updateSexTarget"
							>
								<el-divider content-position="center"
									>修改性别</el-divider
								>
								<updateSex
									v-if="updateSexTargetIsVisible"
									class="slideRightReturn"
								></updateSex>
								<el-skeleton :rows="5" animated v-else />
							</div>
						</div>
						<div
							v-else-if="tabIndex === String(5)"
							class="slideRightReturn"
						>
							<div
								style="position: relative"
								ref="updateSignTarget"
							>
								<el-divider content-position="center"
									>修改个性签名</el-divider
								>
								<updateSign
									v-if="updateSignTargetIsVisible"
									class="slideRightReturn"
								></updateSign>
								<el-skeleton :rows="5" animated v-else />
							</div>
						</div>
						<div
							v-else-if="tabIndex === String(6)"
							class="slideRightReturn"
						>
							<div
								style="position: relative"
								ref="updatePasswordTarget"
							>
								<el-divider content-position="center"
									>重置密码</el-divider
								>
								<updatePassword
									v-if="updatePasswordTargetIsVisible"
									class="slideRightReturn"
								></updatePassword>
								<el-skeleton :rows="5" animated v-else />
							</div>
						</div>
						<div
							v-else-if="tabIndex === String(1)"
							class="slideRightReturn"
						>
							<div style="position: relative" ref="myBlogTarget">
								<el-divider content-position="center"
									>我的博客</el-divider
								>
								<myBlog
									v-if="myBlogTargetIsVisible"
									class="slideRightReturn"
								></myBlog>
								<el-skeleton :rows="7" animated v-else />
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>

<script setup>
import { defineAsyncComponent, onBeforeMount, reactive } from 'vue';
import topNav from '../components/topNavigation.vue';
import getFile from '../utils/getAssetsFile.js';
import { user } from '../store/user.js';
import { date } from '../store/date.js';
import { useRouter } from 'vue-router';

//异步组件引入
import { useIntersectionObserver } from '@vueuse/core';
const imgUpload = defineAsyncComponent(() =>
	import('../components/imgUpload.vue')
);
const updateNickname = defineAsyncComponent(() =>
	import('../components/updateNickname.vue')
);
const updateSex = defineAsyncComponent(() =>
	import('../components/updateSex.vue')
);
const updateSign = defineAsyncComponent(() =>
	import('../components/updateSign.vue')
);
const updatePassword = defineAsyncComponent(() =>
	import('../components/updatePassword.vue')
);
const myBlog = defineAsyncComponent(() => import('../components/myBlog.vue'));

const imgUploadTarget = ref(null);
const updateNicknameTarget = ref(null);
const updateSexTarget = ref(null);
const updateSignTarget = ref(null);
const updatePasswordTarget = ref(null);
const myBlogTarget = ref(null);
//相当于一个dom元素，给需要隐藏或显示的元素加上个ref = target 就完事了，但不能给组件，组件外面套一层div，给div的

const imgUploadTargetIsVisible = ref(false);
const updateNicknameTargetIsVisible = ref(false);
const updateSexTargetIsVisible = ref(false);
const updateSignTargetIsVisible = ref(false);
const updatePasswordTargetIsVisible = ref(false);
const myBlogTargetIsVisible = ref(false);
//这个是控制异步组件显示与否的，给组件加个v-if来绑定这个

const { stop } = useIntersectionObserver(
	[
		imgUploadTarget,
		updateNicknameTarget,
		updateSexTarget,
		updateSignTarget,
		updatePasswordTarget,
		myBlogTarget,
	],
	([{ isIntersecting }]) => {
		if (isIntersecting) {
			imgUploadTargetIsVisible.value = isIntersecting;
			updateNicknameTargetIsVisible.value = isIntersecting;
			updateSexTargetIsVisible.value = isIntersecting;
			updateSignTargetIsVisible.value = isIntersecting;
			updatePasswordTargetIsVisible.value = isIntersecting;
			myBlogTargetIsVisible.value = isIntersecting;
		}
	}
);

const router = useRouter();
const userStore = user();
const dateStore = date();

let tabIndex = ref('0');
const userData = ref('');
let loginState = ref(false);

let tabMsg = reactive([
	{
		tabName: '首页',
	},
	{
		tabName: '我的博客',
	},
	{
		tabName: '修改头像',
	},
	{
		tabName: '修改昵称',
	},
	{
		tabName: '修改性别',
	},
	{
		tabName: '个性签名',
	},
	{
		tabName: '重置密码',
	},
]);

let linkMsg = [
	{
		linkName: '文章',
		linkMethod: () => {
			router.push('/article');
		},
	},
	{
		linkName: '发现',
		linkMethod: () => {
			router.push('/discover');
		},
	},
	{
		linkName: '留言板',
		linkMethod: () => {
			router.push('/board');
		},
	},
];
const handleSelect = (key) => {
	tabIndex.value = key;
};
const toIndex = () => {
	router.push('/');
};

onBeforeMount(async () => {
	let username = localStorage.getItem('username');
	if (username) {
		userData.value = await userStore.getSpecifyUserMsg(username);
		if (userData.value !== 'error') {
			loginState.value = true;
			if (
				!userData.value.nickname ||
				userData.value.nickname === 'null'
			) {
				userData.value.nickname = `新用户${userData.value.id}号`;
			}
			if (!userData.value.avatar || userData.value.avatar === 'null') {
				userData.value.avatar = getFile.getAssetsFile(
					'img',
					'未登录头像.png'
				);
			}
			if (!userData.value.notes || userData.value.notes === 'null') {
				userData.value.notes = '这个人很懒...';
			}
			if (!userData.value.gender || userData.value.gender === 'null') {
				userData.value.gender = 'Robot';
			}

			let registDate = new Date(JSON.parse(userData.value.registdate));
			userData.value.registdate = {
				year: registDate.getFullYear(),
				month: registDate.getMonth() + 1,
				daysub: dateStore.getDaysBetweenDates(new Date(), registDate),
			};
			let userType = localStorage.getItem('usertype');
			if (userType === 'managerOk') {
				userData.value.usertype = '管理员';
			} else {
				userData.value.usertype = '正式会员';
			}
			userData.value.username = username;
		} else {
			loginState.value = false;
		}
	} else {
		loginState.value = false;
	}
});
</script>

<style scoped>
.slideRightReturn {
	animation-duration: 0.5s;
}
</style>
